<template>
  <div class="rightMid1">
    <!-- 定义的容器 -->
    <!--备注图片-->
    <img :src="imgurl" id="r2Remark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
<!--    备注内容-->
    <div v-show="seen" id="r2cont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <li>已解决Bug：状态已到resolved Bug</li>
        <li>未解决Bug：状态未到resolved Bug</li>
        <li>待关闭Bug：状态已到CBD，待CBT Bug</li>
      </div>
    </div>
<!--    柱状图-->
    <div id="rightMid1Chart" style="width: 5.75rem;height: 2.85rem"></div>
  </div>
</template>

<script>
import img from '../assets/remark.png'

export default {
  name: "rightMid1Chart",
  mounted() {
    this.getdata();
  },
  data() {
    return {
      // 用于备注显示
      imgurl:img,
      seen:false,
      charts: "",
      // 图表数据
      opinionData: [],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("rightMid1Chart"));
      // 绘制图表
    //   let test ={"\u5362\u5947\u534e": {"allBug": 61, "unsolved": 2, "solved": 59, "waitClose": 39},
    //     "\u738b\u751f\u88d5": {"allBug": 27, "unsolved": 3, "solved": 24, "waitClose": 17},
    //     "\u674e\u4e0a\u798f": {"allBug": 31, "unsolved": 6, "solved": 25, "waitClose": 5},
    //     "\u6797\u826f\u5f6c": {"allBug": 54, "unsolved": 6, "solved": 48, "waitClose": 27},
    //     "\u5f20\u6c38\u5b8f": {"allBug": 14, "unsolved": 0, "solved": 14, "waitClose": 13},
    //     "\u9a6c\u6797\u6d9b": {"allBug": 25, "unsolved": 1, "solved": 24, "waitClose": 14},
    //     "\u9b4f\u65b0": {"allBug": 5, "unsolved": 1, "solved": 4, "waitClose": 0},
    //     "\u7f57\u70b3\u5cf0": {"allBug": 5, "unsolved": 2, "solved": 3, "waitClose": 0},
    //     "\u5468\u6d77": {"allBug": 2, "unsolved": 1, "solved": 1, "waitClose": 0},
    //     "\u8303\u8d77\u67f3": {"allBug": 1, "unsolved": 1, "solved": 0, "waitClose": 0},
    //     "\u6731\u5b89\u8d85": {"allBug": 1, "unsolved": 0, "solved": 1, "waitClose": 1},
    //     "\u590f\u8679": {"allBug": 2, "unsolved": 0, "solved": 2, "waitClose": 0}}
    //  处理数据
      let test = this.opinionData
      let allbug = []
      let unsolved = []
      let solved = []
      let waitClose = []
      let name = []
      for(var key in test) {
        name.push(key);             //属性名（key）
        allbug.push(test[key]["allBug"]);       //属性值（value）
        unsolved.push(test[key]["unsolved"]);
        solved.push(test[key]["solved"]);
        waitClose.push(test[key]["waitClose"]);
        }
      var option = {
        // 标题
        title: {
            text: 'Bug解决情况',
            textStyle:{
                color:"#CCFFFF",
                fontSize:this.refontSize(18),
                fontWeight:"bold"
            }
        },
        // 提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
        },
        // 表头
        legend: {
            data: ['已解决Bug', '未解决Bug', '待关闭Bug'],
            textStyle:{
              color:'#CCFFFF',
              fontSize:this.refontSize(14),
            },
            // padding:'1.25rem'
            padding:[30,0,0,0]
        },
        // 周边间距
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        // x轴设置
        xAxis: [
            {
                type: 'category',
                data: name,
                splitLine:{
                  show:false
                },
                axisLine:{
                  lineStyle:{
                    color:"#CCFFFF",
                  }
                },
                axisLabel:{
                color:"#CCFFFF",
                rotate:90,
                fontSize:this.refontSize(14),
                }
            }
        ],
        // y轴设置
        yAxis: [
            {
                type: 'value',
                splitLine:{
                  show:false
                },
              splitNumber:3,
                axisLine:{
                  lineStyle:{
                    color:"#CCFFFF",
                  }
                },
                axisLabel:{
                color:"#CCFFFF",
                fontSize:this.refontSize(14),
                  formatter:'{value}个'
                }
            }
        ],
        // 数据
        series: [
            {
                name: '已解决Bug',
                type: 'bar',
                itemStyle: {
                color: '#66CDAA'
                },
                stack: 'Bug',
                emphasis: {
                    focus: 'series'
                },
                data: solved
            },
            {
                name: '未解决Bug',
                type: 'bar',
                itemStyle: {
                color: '#FFC0CB'
                },
                stack: 'Bug',
                emphasis: {
                    focus: 'series'
                },
                data: unsolved
            },
            {
                name: '待关闭Bug',
                type: 'bar',
                itemStyle: {
                color: '#9370DB'
                },
                // stack: '待关闭Bug',
                stack: 'Bug',
                emphasis: {
                    focus: 'series'
                },
                data: waitClose
            },
        ]
        }
      myChart.setOption(option);
        },
    // 请求bug归属信息
    getdata(){
        this.$http({ method: 'get',
                    url: 'show/bugbelong/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
                    this.opinionData =response.data;
                    // console.log(this.$route.query.project)
                    // 渲染
                    this.SetEchart()
                },
                // response => {
                //     console.log("error");
                // }
                );
    },
    // 鼠标放置操作
    onMouseOver() {
      this.seen=true
    },
    // 鼠标离开操作
    onMouseOut() {
      this.seen=false
    },
  }
};
</script>

<style lang="scss" scoped>
#r2Remark{
  position: fixed;
  z-index: 99999999;
  margin-left: 5.2rem;
  width: 0.3rem;
  height: 0.3rem;
}
#r2cont{
  width: 6rem;
  height: 1.5rem;
  margin-top: 0.4rem;
  margin-left: 1rem;
  color:#CCFFFF;
  background: rgba(64,64,64,.5);
  li{ line-height:0.35rem}
  li:before {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    border-radius: 50%;
    background: #4F8EFF;
    vertical-align: middle;
    margin-right: 0.08rem;
  }
}
</style>